<template>
  <view>
    <!-- 轮播图 -->
    <view style="margin-top: -100rpx"> </view>
    <u-swiper :list="goodinfoImg" circular="true" height="750rpx"></u-swiper>
    <!-- 信息 -->
    <view style="background-color: white; padding: 10rpx">
      <view
        style="display: flex; justify-content: space-between; margin: 30rpx"
      >
        <view style="flex: 4; font-size: 50rpx; color: red">¥547.00</view>
        <view class="sx">销量:30</view>
        <view class="sx">库存1970</view>
      </view>
      <!-- 标题 -->
      <view style="margin: 30rpx">
        女士羽绒服2025新款冬季韩版时尚百搭中长款羽绒服女装外套
      </view>
      <view style="margin: 30rpx; font-size: 25rpx; color: gray"
        >规格:500g</view
      >
    </view>

    <!-- 详情 -->
    <view style="text-align: center; margin: 50rpx"> -详细介绍- </view>
    <!-- 图片详细 -->
    <view
      style="
        margin-bottom: 130rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      "
    >
      <image
        :src="init"
        style="width: 100%; height: 1000rpx"
        v-for="init in imgs"
      />
    </view>

    <!-- 购买 -->
    <view class="czl">
      <view class="sys">
        <image
          src="/static/imgs/sy-1.png"
          style="width: 40rpx; height: 40rpx"
        ></image>
        <view style="font-size: 25rpx">首页</view>
      </view>
      <!-- 购物车 -->

      <view class="sys">
        <image
          src="/static/imgs/gwc-1.png"
          style="width: 40rpx; height: 40rpx"
        ></image>
        <view style="font-size: 25rpx">购物车</view>
      </view>
      <view class="num">1</view>
      <!-- 加入购物车,购买 -->
      <view style="display: flex">
        <view
          class="btns"
          style="background-color: brown; border-radius: 50rpx 0rpx 0rpx 50rpx"
          >加入购物车</view
        >
        <view
          class="btns"
          style="background-color: red; border-radius: 0rpx 50rpx 50rpx 0rpx"
          >立即购买</view
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgs: [
        "https://b0.bdstatic.com/ugc/c9FRKxIruCVsIGgzlCuYYQf0d85622e0aee89ebd73d1b6bbd66541.jpg",
        "https://wx1.sinaimg.cn/mw690/e8a22d7bgy1hovb7jydr5j20u018zgsd.jpg",
        "https://img1.baidu.com/it/u=4120155032,3142370460&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
      ],
      goodinfoImg: [
        "https://cdn.uviewui.com/uview/swiper/swiper1.png",
        "https://cdn.uviewui.com/uview/swiper/swiper2.png",
        "https://cdn.uviewui.com/uview/swiper/swiper3.png",
      ],
    };
  },
};
</script>

<style lang="less">
.btns {
  color: white;
  text-align: center;
  line-height: 40rpx;
  height: 40rpx;
  margin-top: 10rpx;
  padding: 20rpx;
  width: 180rpx;
}
.num {
  height: 30rpx;
  color: red;
  width: 30rpx;
  position: relative;
  top: 10rpx;
  left: -30rpx;
  border: 1rpx solid red;
  border-radius: 50%;
  text-align: center;
  line-height: 30rpx;
  font-size: 25rpx;
}
.sys {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10rpx;
  margin-left: 50rpx;
}
.czl {
  display: flex;
  background-color: #f1f1f1;
  position: fixed;
  bottom: 0rpx;
  width: 100%;
  height: 100rpx;
}
.imgbox {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx {
  font-size: 25rpx;
  color: gray;
  margin: 20rpx;
}
page {
  background-color: #f1f1f1;
}
</style>
